<template>
  <view>
    <image
      mode="widthFix"
      src="../static/images/signinBg.png"
      style="width: 100%"
    ></image>
    <view class="_box">
      <view class="title"
        >欢迎加入<text class="red">皖集采</text>，请填写申请信息。</view
      >
      <!-- <view class="title" v-if="reseller_recommend_list.first_reseller_info.nickname">邀请人：<text class="red">{{reseller_recommend_list.first_reseller_info.nickname}}</text>请核对</view> -->
      <view>
        <input
          type="text"
          maxlength="10"
          v-model="Name"
          placeholder="请填写真实姓名，用于佣金结算"
        />
        <input
          type="number"
          maxlength="11"
          v-model="phone"
          placeholder="请填写您的手机号方便联系"
        />
        <input
          type="number"
          maxlength="6"
          v-model="rec_code"
          placeholder="请输入邀请码(必填)"
        />
      </view>
      <!-- 	<view class="big">分销等级:</view>
			<view class="left">
				<picker  @change="bindPickerChange" :range="array">
						{{arrayNum[index].name}}
				</picker>
			</view> -->

      <button type="default" @click="defaul()">申请成为掌柜</button>
    </view>
  </view>
</template>

<script>
import uniCollapse from "@/member/components/uni-collapse/uni-collapse.vue";
import uniCollapseItem from "@/member/components/uni-collapse-item/uni-collapse-item.vue";
export default {
  components: {
    uniCollapse,
    uniCollapseItem,
  },
  data() {
    return {
      flag: false,
      Name: "",
      phone: "",
      list: [],
      mode: { name: "普通分销", id: 1 },
      reseller_recommend_list: "",
      // title:"普通分销",
      arrayNum: [],
      array: [],
      index: 0,
      rec_code: "",
    };
  },
  created() {
    if (uni.getStorageSync("InvitationCode")) {
      this.rec_code = uni.getStorageSync("InvitationCode");
    }
    this.getmunber();
  },
  methods: {
    getmunber() {
      this.$util
        .request({
          url: "/mobile/index.php?act=distribution&op=getCode",
          method: "get",
          data: {},
        })
        .then((res) => {
          this.rec_code = res.datas.distCode;
        });
    },
    // getClass(){
    // 	this.$util.request({
    // 		url:'/mobile/index.php?act=distribution&op=gradeList',
    // 		method:'get',
    // 		data:{}
    // 	}).then(res=>{
    // 		this.list=res.datas.wx_grades
    // 		this.list.map((item)=>{
    // 			this.arrayNum.push(item)
    // 			this.array.push(item.name)

    // 		})

    // 	})
    // },
    defaul() {
      let that = this;
      if (that.phone && that.Name) {
        if (!this.rec_code) {
          uni.showToast({
            title: "邀请码不能为空！",
            icon: "none",
          });
          return false;
        }
        if (!/^1[3456789]\d{9}$/.test(that.phone)) {
          uni.showToast({
            title: "手机号码有误，请重填",
            icon: "none",
          });
          return false;
        }
        this.$util
          .request({
            url: "/mobile/index.php?act=distribution&op=apply_com",
            method: "post",
            data: {
              // rank:that.arrayNum[this.index].id,
              phone: that.phone,
              name: that.Name,
              rec_code: this.rec_code,
            },
          })
          .then((res) => {
            if (res.error_code == 0) {
              uni.showToast({
                title: "申请成功",
                icon: "none",
                success() {
                  setTimeout(() => {
                    uni.navigateTo({
                      url: "failed",
                    });
                  }, 1000);
                },
              });
            } else {
              uni.showToast({
                title: res.message,
                icon: "none",
              });
            }
          });
      } else {
        uni.showToast({
          title: "姓名和手机号不能为空",
          icon: "none",
        });
      }
    },

    bindPickerChange: function (e) {
      //改变的事件名
      let that = this;
      console.log("picker发送选择改变，携带值为", e.target.value); //用于输出改变索引值
      this.index = e.target.value; //将数组改变索引赋给定义的index变量
    },
    // choice(index){
    // 	index--
    // 	this.mode=this.list[index];
    // 	this.$refs.line.onClick();
    // 	this.title=this.mode.name;
    // 	console.log(this.list[index]);
    // },
    // setClass(){
    // 	this.flag=!this.flag
    // }
  },
};
</script>

<style>
image {
  height: 270upx;
}
input {
  height: 80upx;
  border: 1px solid #cccccc;
  border-radius: 20upx;
  margin: 20upx 0;
  padding-left: 10upx;
  background-color: #ffffff;
  font-size: 24upx;
}
.selected_line {
  background-color: #f0f0f0 !important;
}
.left {
  height: 70upx;
  line-height: 70upx;
  padding-left: 24upx;
  margin: 0 3upx;
  background-color: #ffffff;
  border-bottom: 1upx solid #f0f0f0;
}
.left:last-child {
  border-bottom: none;
}
.big {
  font-size: 32upx;
  color: #666666;
}
._box {
  margin: 25upx 20upx 0;
}
._box .title {
  font-size: 32upx;
}
.red {
  color: #ff4300;
}
.uni-collapse-cell--hide {
  height: 80upx !important;
}
.uni-collapse-cell__title {
  height: 80upx !important;
  background-color: #f0f0f0;
  border: 1px solid #f0f0f0;
}
.heihei .uni-collapse-cell__title {
  background-color: #ffffff;
}
.uni-collapse-cell__title-text {
  font-size: 28upx !important;
}
.uni-collapse-cell {
  border-bottom-width: 0upx !important;
}
button {
  margin-top: 75upx;
  height: 85upx;
  border-radius: 10upx;
  background-color: #ff4300 !important;
  line-height: 85upx;
  color: #ffffff !important;
}
</style>
